<template>
  <div class="user">
    <!-- 监听子组件向外暴露的事件 -->
    <userSearch @query-click="handleQueryClick" @reset-click="handleResetClick" />
    <userContent ref="contentRef" @new-click="handleNewClick" @edit-click="handleEditBtnClick" />
    <userModal ref="modalRef" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import userSearch from './c-cpns/user-search.vue'
import userContent from './c-cpns/user-content.vue'
import userModal from './c-cpns/user-modal.vue'

// 对 content 组件进行操作
const contentRef = ref<InstanceType<typeof userContent>>()

function handleQueryClick(formData: any) {
  // 获取子组件 user-search 传过来的数据
  // 通过 组件的 ref 调用相关的函数
  contentRef.value?.fetchUserListData(formData)
}
// 重置操作 user-search
function handleResetClick() {
  contentRef.value?.fetchUserListData()
}

const modalRef = ref<InstanceType<typeof userModal>>()
// 处理 user-content 传递过来的事件
function handleNewClick() {
  modalRef.value?.setDialogVisible()
}

function handleEditBtnClick(itemData: any) {
  // console.log(itemData)
  modalRef.value?.setDialogVisible(false, itemData)
}
</script>

<style lang="less" scoped>
.user {
}
</style>
